<template>
  <div class="set-addr-type-win">
    <el-dialog
      class="dataOriginDialog"
      :title="title"
      :visible.sync="visible"
      :close-on-click-modal="false"
      width="30%"
      @close="closeDialog"
    >
      <div class="data_origin_list">
        <div class="origin_item" v-for="item in formLists" :key="item.id">
          <div class="oi_left">
            <div class="oil_text" v-if="!item.isFocus">{{ item.name }}</div>
            <input
              :ref="'input' + item.id"
              class="oil_inp"
              autofocus="autofocus"
              v-else
              v-model="item.name"
              @change="(e) => onDataOriginInputChange(e, item.id)"
              maxlength="6"
              @keyup.enter="handleEnter"
              @blur="inputBlurEvent(item)"
            />
          </div>
          <div class="oi_right">
            <div class="oir_btn">
              <!-- <span v-if="!item.isFocus" @click="editOneInDataOriginDialog({...item, isAdd: false})">修改</span> -->
              <span v-if="!item.isFocus" @click="editbtnClick(item.id)">修改</span>
              <span v-else>修改</span>
            </div>
            <div
              class="oir_btn"
              style="margin-left: 12px"
              @click="deleteOneInDataOriginDialog(item.id)"
            >删除</div>
          </div>
        </div>
      </div>
      <div style="padding: 10px 8px">
        <div class="oir_btn" style="display:flex;justify-content: flex-start;cursor: default;">
          <span @click="addOneInDataOriginDialog()" style="cursor: pointer;">添加</span>
        </div>
        <div style="color: #F56C6C;font-size:12px;margin-top:10px;">*限定输入6位~</div>
      </div>

      <div class="btn-groups">
        <el-pagination
          small
          layout="prev, pager, next"
          :total="total_num"
          :current-page="currentPage"
          @current-change="pageChange"
        ></el-pagination>
        <el-button size="mini" type="primary" @click="dataOriginClickConfirm">确定</el-button>
        <el-button size="mini" @click="closeDialog()">取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  props: {
    visible: Boolean,
    onOk: Function,
    title: String,
    initDataList: Array,
    getList: Function,
    apiString: String,
    total_num_pass: Number,
  },
  data() {
    return {
      dialogShow: false,
      formLists: [],
      total_num: 0,
      index: 1,
      currentPage: 1,
    };
  },
  computed: {},
  created() {},
  mounted() {
    console.log(this.onOk, "onOk ");
    console.log(this.visible, "visible");
    console.log(this.formLists, "formLists");
    this.index = this.apiString === "dataSource" ? 1 : 2;
  },
  watch: {
    initDataList(val, oldval) {
      console.log(val, oldval);
      this.formLists = JSON.parse(
        JSON.stringify(
          this.initDataList.map((item) => ({
            ...item,
            isFocus: false,
          }))
        )
      );
      console.log(this.formLists, "this.formLists");
    },
    total_num_pass(val, oldval) {
      console.log(val, "val");
      this.total_num = val;
    },
  },
  methods: {
    dataOriginClickConfirm() {
      this.onOk();
    },
    closeDialog() {
      this.onOk();
    },
    editbtnClick(id) {
      this.formLists.forEach((item, index) => {
        // 给给输入框获取焦点
        if (item.id == id) {
          item.isFocus = !item.isFocus;
          item.isAdd = false;

          this.$nextTick(() => {
            //主要代码
            let id = "input" + item.id;
            console.log(this.$refs[id]);
            if (this.$refs[id].length) {
              this.$refs[id][0].focus();
            }
          });
        }
      });
    },
    onDataOriginInputChange(e, id) {
      console.log(e, id);
    },
    pageChange(e) {
      this.currentPage = e;
      console.log(this.apiString, "apiString");
      this.getList(this.index, e);
    },
    handleEnter(event) {
      event.target.blur(event);
    },
    async inputBlurEvent(item) {
      console.log(item, "item 失焦事件");
      if (!item.name) {
        let index = this.formLists.findIndex((it2) => it2.id == item.id);
        this.formLists.splice(index, 1);
        console.log(this.formLists, "this.formLists");
        return;
      }

      let res;
      if (item.isAdd) {
        res = await this.axios.post(this.apis[`${this.apiString}Save`], {
          name: item.name,
        });
      } else {
        res = await this.axios.post(this.apis[`${this.apiString}Update`], {
          name: item.name,
          id: item.id,
        });
      }
      if (res.retCode === 2000) {
        this.$message.success("操作成功!");
      } else {
        this.$message.warning(res.retMessage);
      }
      this.getList(this.index, this.currentPage);
    },
    deleteOneInDataOriginDialog(id) {
      this.$confirm("确认要删除吗？", "提示")
        .then(async () => {
          const res = await this.axios.post(
            this.apis[`${this.apiString}Delete`],
            { id: id }
          );
          if (res.retCode === 2000) {
            this.$message.success("删除成功!");
            this.getList(this.index, this.currentPage);
          }
        })
        .catch(() => {
          return;
        });
    },
    addOneInDataOriginDialog() {
      let onlyId = new Date().getTime();

      this.formLists.push({
        id: onlyId,
        value: onlyId,
        name: "",
        isFocus: true,
        isAdd: true,
      });

      this.$nextTick(() => {
        //主要代码
        let id = "input" + onlyId;
        console.log(this.$refs[id]);
        if (this.$refs[id].length) {
          this.$refs[id][0].focus();
        }
      });
    },
  },
  components: {},
};
</script>

<style lang="less">
.btn-groups {
  .el-pagination {
    margin: 10px 0;
  }
  .el-pager li.active {
    background-color: #409eff;
    border-radius: 3px;
    color: #fff;
  }
  .el-pagination .btn-prev,
  .el-pagination .btn-next {
    padding: 0 4px !important;
  }
  .el-pager li {
    padding: 0;
    width: 1rem;
  }
}
</style>

